<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/page5.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./../font/iconfont.css">
</head>
<body>
    <div class="wrap">
        <div class='header-top fr' id="dingbu">
            <div class="topbar-en fr" style="margin-right:30px;" >
                <a href="#" title="语言">EN</a>
             </div>
            <div class="topbar-service fr" style="margin:0 30px;" >
                <a href="#" title="在线客服"><i class="iconfont">&#xe677;</i></a>
             </div>
            <div class="topbar-cart fr" style="margin-left:30px;">
                <a href="./page5.html" title="购物车"><i class="iconfont">&#xe60a;</i></a>
            </div>
            
            <div class="topbar-user fr">
                <a href="./login.html" title="登入">登入</a>
                &nbsp;或 &nbsp;
                <a href="./login.html" title="注册">注册</a>
                &nbsp;ANTA会员
            </div>
        </div>
        <!-- --------------------第一部分结束 -->
        <div class="header-nav fl">
            <div class="main">
            <div class="header-logo fl">  
                <div class="logo-inner">
                    <a href="./page1.html">
                      <img src="https://img.fishfay.com/theme/images/logo/logo-anta-r-02.svg" alt=""></a>
                </div>
            </div>
            <!-- -------------二级菜单开始 -->
        
         <div class="nav-list fl">
            <ul class="back1">
            <li class="webnav fl">
                <a href="./page3.html" >男子</a>
                <ol class="webnav-box1"> 
                    <li>
                        <dl class="webnav-box2">  
                            <dt class="orange">所有鞋类</dt>
                            <dd>运动鞋 </dd>
                            <dd>跑鞋</dd>
                            <dd>篮球鞋</dd>
                            <dd>所有鞋类</dd>
                            <dd>运动鞋</dd>
                            <dd>跑鞋</dd>
                            <dd>篮球鞋</dd>
                        </dl>
                    </li>
                    <li>
                        <dl class="webnav-box3">  
                            <dt class="orange">所有服装</dt>
                            <dd>套头卫衣</dd>
                            <dd>套头卫衣</dd>
                            <dd>套头卫衣</dd>
                            <dd>套头卫衣</dd>
                        </dl>
                    </li>
                    <li>
                        <dl class="webnav-box4">  
                            <dt class="orange">所有配件</dt>
                            <dd>运动鞋</dd>
                            <dd>跑鞋</dd>
                            <dd>篮球鞋</dd>
                            <dd>所有鞋类</dd>
                            <dd>运动鞋</dd>
                            <dd>跑鞋</dd>
                            <dd>篮球鞋</dd>
                        </dl>
                    </li>
                    <li>
                        <dl class="webnav-box5">  
                            <dt class="orange">运动项目</dt>
                            <dd>运动鞋</dd>
                            <dd>跑鞋</dd>
                            <dd>篮球鞋</dd>
                            <dd>所有鞋类</dd>
                            <dd>运动鞋</dd>
                            <dd>跑鞋</dd>
                            <dd>篮球鞋</dd>
                        </dl>
                    </li>
                </ol>
            </li>
            <li class="back1-box1">
                <a href="./page3.html">女子</a>
            </li>
            <li data-type="kids" class="back1-box1">
                <a href="./page3.html" target="_blank" title="儿童">儿童</a>
            </li>
            <li data-type="antakids" class="back1-box1">
                <a href="./page3.html" target="_blank" title="安踏儿童">安踏儿童</a>
            </li>
            <li data-type="culture" class="back1-box1">
                <a href="./page3.html" target="_blank" title="品牌文化">品牌文化</a>
            </li>
            <li data-type="advert" class="back1-box1">
                <a href="./page3.html" target="_blank" title="观赏视频">观赏视频</a>
            </li>
            <li data-type="contact" class="back1-box1">
                <a href="./page3.html" target="_blank" title="联系我们">联系我们</a>
            </li>
         </ul> 
        </div>
           <!-- 搜索框 -->
            <div class="nav-search-box fr">
                    <a class="nav-search-btn" title="搜索"><i class="iconfont">&#xe649;</i></a>
                    <input type="text"  placeholder="搜索" class="nav-search-input">
           </div>
       </div>
    </div>
    <!-- ---------------内容正式开始------------------- -->
    <div class="main">
        <div class="back5 fl">
            <h1>我的购物车</h1>
        </div>

<div class='box fl'>
    <div class='header'>
        <ul>
            <li>
                <input type="checkbox" name="quan">全选
            </li>
            <li>商品图片</li>
            <li>数量</li>
            <li>单价</li>
            <li>商品名称</li>
            <li>小计</li>
            <li>操作</li>
        </ul>
    </div>
    <div class='content'>
        <!-- <ul class="conul">
            <li>
                <input type="checkbox" name="xuan">
            </li>
            <li>
                <img src="https://img.fishfay.com/shopgoods/21/352049980/zt-352049980/7a8cc849da24b662b9643ed2a91cf249.jpg?x-image-process=image/resize,w_800,h_800" alt="" width="100" height="100">
            </li>
            <li>
                <button>-</button>
                <input type="text" size='1'value='1'>
                <button>+</button>
            </li>
            <li>
                ￥<span>2000.50</span>
            </li>
            <li>索尼相机</li>
            <li>
                ￥<span>2000.50</span>
            </li>
            <li><button>删除</button></li>
        </ul> -->
        <!-- <ul>
            <li>
                <input type="checkbox" name="xuan">
            </li>
            <li>
                <img src="https://img.fishfay.com/shopgoods/1/112121103/zt-112121103/87ef84c1edb52e9c05932fc34bd9206a.jpg?x-image-process=image/resize,w_800,h_800" alt="" width="100" height="100">
            </li>
            <li>
                <button>-</button>
                <input type="text" size='1'value='1'>
                <button>+</button>
            </li>
            <li>
                ￥<span>2300.50</span>
            </li>
            <li>数码相机</li>
            <li>
                ￥<span>2300.50</span>
            </li>
            <li><button>删除</button></li>
        </ul> -->
    </div>
    <div class='floor'>
        <button>全删</button>
        <!-- <button>增加</button> -->
        总计：￥<span>00.00</span>
        商品数量：<span>0</span>
    </div>
</div>



    <!-- <div class="head fl">
        <span><input type="checkbox"> 全选</span>
        <span>商品</span>
        <span>价格</span>
        <span>数量</span>
        <span>操作</span>
    </div>
    <ul class="list fl">
        <li>
            <input type="checkbox">
            <img src="https://img14.360buyimg.com/n7/jfs/t1/156219/13/18830/128819/6062f722E3c094aca/b3a8f6c5b3dec246.jpg" alt="">
            <h3>ECCO爱步高跟鞋 黑色正装浅口尖头高跟单鞋</h3>
            <span class="price">188</span>
            <span class="num">2</span>
            <span class="del">删除</span>
        </li>
        <li>
            <input type="checkbox">
            <img src="https://img14.360buyimg.com/n7/jfs/t1/156219/13/18830/128819/6062f722E3c094aca/b3a8f6c5b3dec246.jpg" alt="">
            <h3>ECCO爱步高跟鞋 黑色正装浅口尖头高跟单鞋</h3>
            <span class="price">188</span>
            <span class="num">2</span>
            <span class="del">删除</span>
        </li>
    </ul> -->
    </div>
    <!-- ----------------------结尾----------- -->
    <div class="main">
        <div class="back10 fl">
            <div class="ft-slogan fl">
                <img src="https://img.fishfay.com/theme/images/logo/slogan-anta-r.svg" alt="" >
            </div>
           <div class="back10-box">
                   <ul class="back10-box1">
                       <li>安踏海外</li>
                       <li>|</li>
                       <li>安踏投资者关系</li>
                   </ul>
                   <ul class="back10-box2">
                        <li>Copyright(C) 2020 by www.ANTA.com</li>
                        <li>©安踏体育用品有限公司版权所有</li>
                        <li>营业执照</li>
                        <li>开户许可证</li>
                        <li>闽ICP备11020421号</li>
                        <li>闽公网安备35058202000423号</li>
                    </ul>
                    <ul class="back10-box3">
                        <li>安踏儿童</li>
                        <li>|</li>
                        <li>Fila</li>
                        <li>|</li>
                        <li>Kolon Sport</li>
                        <li>|</li>
                        <li>Descente</li>
                        <li>|</li>
                        <li>Sprandi</li>
                        <li>|</li>
                        <li>Kingkow</li>
                    </ul>
           </div>
        </div>
    </div>
    <!-- ------------------------侧边栏--------------- -->
    <div class="web-covers">
        <a href="#dingbu"></a>
        <a href="./page5.html" title="购物车" class="cart"></a> 
    </div> 



</div>

<!-- <script src="./js/lib/jquery-1.8.3/jquery-1.8.3.js"></script>
<script src="./js/page4.js"></script> -->


<!-- <script>
    //获取操作对象，大盒子对象
    var div1=document.querySelector('.box')
    var xuans=document.getElementsByName('xuan')
    var content=document.querySelector('.content')
    var floor=document.querySelector(".floor")
    var a=3 //图片名称
    //给当前div对象绑定点击事件
    div1.onclick=function(e){
        //事件对象兼容
        var e = e || window.event
        //点击对象兼容
        var target= e.target || e.srcElement
        //全选
        if(target.name=="quan"){
            //遍历所有的选中框对象
            for(var i=0;i<xuans.length;i++){
                //判断当前全选框是否被选中
                if(target.checked){
                    xuans[i].checked=true
                }else{
                    xuans[i].checked=false
                }
            }
        }
        //加法
        if(target.innerHTML=="+"){
            //获取输入框中的value值
            var val=target.previousElementSibling.value
            val++
            //把操作结果重新赋值给输入框
            target.previousElementSibling.value=val
            //获取当前商品对象
            var ul1=target.parentNode.parentNode
            //获取单价
            var price=ul1.children[3].lastElementChild.innerHTML
            //计算小计
            var xiaoji=val*price
            //把计算结果重新赋值给小计
            ul1.children[5].lastElementChild.innerHTML=xiaoji
            total()
        }
        //减法
        if(target.innerHTML=="-"){
            //获取输入框中的value值
            var val=target.nextElementSibling.value
            if(val<=1){
                val=1
            }else{
                val--
            }
            //把操作结果重新赋值给输入框
            target.nextElementSibling.value=val
            //获取当前商品对象
            var ul1=target.parentNode.parentNode
            //获取单价
            var price=ul1.children[3].lastElementChild.innerHTML
            //计算小计
            var xiaoji=val*price
            //把计算结果重新赋值给小计
            ul1.children[5].lastElementChild.innerHTML=xiaoji
            total()
        }
        //删除一行
        if(target.innerHTML=="删除"){
            target.parentNode.parentNode.remove()
            total()
        }
        //增加一行
        if(target.innerHTML=="增加"){
            //创建ul对象
            var newUl=document.createElement("ul")
            //给ul对象添加内容
            newUl.innerHTML='<li>'
                +'<input type="checkbox" name="xuan">'
                +'</li>'
                +'<li>'
                    +'<img src="./img/'+a+'.jpg" alt="" width="100" height="100">'
                    +'</li>'
                    +'<li>'
                        +'<button>-</button>'
                        +'<input type="text" size="1" value="1">'
                        +'<button>+</button>'
                        +'</li>'
                        +'<li>'
                            +'￥<span>2300.50</span>'
                            +'</li>'
                            +'<li>数码相机</li>'
                            +'<li>'
                                +'￥<span>2300.50</span>'
                                +'</li>'
                                +'<li><button>删除</button></li>'
            
            a++
            //判断a变量
            if(a>7){
                a=1
            }
            //把当前新节点追加内容区域中
            content.appendChild(newUl)
            total()
        }
        //全删
        if(target.innerHTML=="全删"){
            //直接删除所有内容
            //遍历所有选中框对象
            // for(var i=xuans.length-1;i>=0;i--){
            //     xuans[i].parentNode.parentNode.remove()
            // }

            /* for(var i=0;i<xuans.length;i++){
                xuans[i].parentNode.parentNode.remove()
                i--
            } */

            //删除被选中的商品
            for(var i=xuans.length-1;i>=0;i--){
                //判断当前选中框是否被选中
                if(xuans[i].checked){
                    xuans[i].parentNode.parentNode.remove()
                }
            }
            total()
        }
    }
    //总计
    function total(){
        //获取所有商品
        var uls=content.children
        var sum=0 //总计
        var num=0 //数量
        //遍历所有商品
        for(var i=0;i<uls.length;i++){
            //获取当前商品的小计
            var xiaoji=uls[i].children[5].lastElementChild.innerHTML
            //获取当前商品的数量
            var mm=uls[i].children[2].querySelector('input').value
            num+=parseInt(mm)
            sum+=parseFloat(xiaoji)
        }
        //给总计的位置赋值
        floor.lastElementChild.previousElementSibling.innerHTML=sum
        //给总数量的位置赋值
        floor.lastElementChild.innerHTML=num
    }
    total() -->
<!-- </script> -->
<script src="./js/jquery-1.8.3.js"></script>
<script src="./js/page5.js"></script>


</body>
</html>